<template>
	<view class="park-hot-spot">
		<view class="one">
			<text>园区热点</text>
			<image @click="goHotSpot" class="arrow" src="@/static/images/index/double-arrow.svg" mode=""></image>
		</view>
		<v-tabs
			v-model="current"
			:tabs="tabList"
			field="hotpoint_type_name"
			@change="changeTab"
			pills
			paddingItem="0 54rpx"
		></v-tabs>
		<uni-load-more
			v-if="loading"
			status="loading"
			:iconSize="12"
			:contentText="{
				contentdown: '上拉显示更多',
				contentrefresh: '正在加载...',
				contentnomore: '到底了~'
		}"></uni-load-more>
		<view v-if="newsList.length">
			<index-hot-spot v-for="(item, index) in newsList" :key="item._id" :news="item" @click-news="clickNews"></index-hot-spot>
		</view>
		<xbd-null-list v-if="!newsList.length && !loading"></xbd-null-list>
	</view>
</template>

<script>
	import IndexHotSpot from '@/components/index/IndexHotSpot.vue';
	import { Index } from '@/api/index.js';
	export default {
		name: 'ParkHotSpot',
		props: {
			tabList: Array
		},
		data() {
			return {
				current: 0,
				newsList: [],
				loading: false
			}
		},
		watch: {
			tabList(val) {
				this.getList(val[0].hotpoint_type_code);
			}
		},
		methods: {
			changeTab(index) {
				// 发请求 修改列表数据
				this.newsList = [];
				this.getList(this.tabList[index].hotpoint_type_code);
			},
			clickNews(obj) {
				uni.navigateTo({
					url: `/pages/hotspot/articledetails?id=${obj._id}&title=${obj.hotpoint_title}`,
				})
			},
			goHotSpot() {
				uni.navigateTo({
					url: '/pages/hotspot/index',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			async getList(type) {
				try{
					this.loading = true;
					const { data } = await Index.getHotSpotList(type);
					this.newsList = data.list;
					this.loading = false;
				} catch(e) {
					this.loading = false;
				}
			}
		},
		components: {
			IndexHotSpot
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .uni-load-more__text {
		font-size: 12px;
	}
	.park-hot-spot {
		padding: 20px 50rpx;
		
		background-color: #FFFFFF;
		.one {
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			margin-bottom: 20px;
			
			font-size: 16px;
			
			color: $uni-text-color;
		}
		.arrow {
			width: 50rpx;
			height: 50rpx;
		}
	}
</style>
